<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>我的图片</title>
<script type="text/javascript">
var selectNewImg = new Array();
var listNewImg="";
var listNewImgUrl="";
var listImgId="";
var pageClick = function(pageNo) {
	var id=$("ul.category-list li.active").attr("data-id");
	if(id){
		searchImages(${model},pageNo,id);
	}else{
		searchImages(${model},pageNo);
	}
}
var searchImages = function(single,currPage,groupId){
	var params = {};
	//其他查询条件
	if(currPage){
		params.page = currPage;
	}
	var groupId=$("ul.category-list li.active").attr("data-id");
	if(groupId){
		params.id = groupId;
	}
	var url=obz.ctx + "/attachment/getImageList";
	$("#image-list").mask("加载中...");
	obz.ajaxJson(url, params, function(resp){
		var result =resp.data;
		$("#image-list").empty();
		if(currPage){
			$("#pagerImage").pager({ pagenumber:currPage, recordcount:result.totalRow, pagesize:result.pageSize, recordtext:'共 {0} 页, {1} 条记录', buttonClickCallback: pageClick });
		}else{
			$("#pagerImage").pager({ recordcount:result.totalRow, pagesize:result.pageSize, recordtext:'共 {0} 页, {1} 条记录', buttonClickCallback: pageClick });	
		}
		var dataList = result.list;
		if(dataList.length>0){
			$(".add-local-image-button").addClass("hidden");
			for(var i=0;i<dataList.length;i++){
				var _li = dataList[i];
				 $("#image-list").append('<li data-file="'+_li.imgPath+'" data-fileUrl="'+_li.imgUrl+'" data-id="'+_li.id+'">'
          				 +' <img alt="" src="'+_li.imgPath+'">'
      					 +' <div class="image-title">'+_li.imgUrl+'</div></li>');
				//var liHtml = obz.dataTemplate4obj($("#ul_li_tpl").html(), _li);
				//$("#mainUl").append(liHtml);
		        }	
		}else{
			$(".add-local-image-button").removeClass("hidden");
		}
		var i=0;
		 $("ul.selectMonth li").click(function() {

			 if(!$(this).hasClass("active")){
			 		i = 0;
			 	}
					 if(i==0){
						 i=1;
						 if(single){
								$("ul.selectMonth li").each(function(){	
									 $(this).removeClass("active");
								});
							}
						    $(this).addClass("active");
						    selectNewImg.length=0;
						    listNewImg="";
						    listNewImgUrl="";
						    listImgId="";
							    $("ul.selectMonth li.active").each(function(){
							    	listNewImg+=$(this).attr("data-file")+",";
							    	listNewImgUrl+=$(this).attr("data-fileUrl")+",";
							    	listImgId+=$(this).attr("data-id")+",";
							    	selectNewImg.push($(this).attr("data-file"));
							    });
						    listNewImg=listNewImg.substring(0,listNewImg.length-1);
						    listImgId=listImgId.substring(0,listImgId.length-1);
						    if(selectNewImg.length>0){
						    	$(".selected-count-region").removeClass("hidden");
						    	$(".js-selected-count").html(selectNewImg.length);
						    	$("#saveImages").removeAttr("disabled");
						    }else{
						    	$(".selected-count-region").addClass("hidden");
						    	$("#saveImages").attr("disabled","disabled");
						    }
						    
					    }else{
					     i=0;
						 $(this).removeClass("active");
						 selectNewImg.length=0;
						 listNewImg="";
						 listNewImgUrl="";
						 listImgId="";
						 $("ul.selectMonth li.active").each(function(){
							 listNewImg+=$(this).attr("data-file")+",";
							 listNewImgUrl+=$(this).attr("data-fileUrl")+",";
							 listImgId+=$(this).attr("data-id")+",";
							 selectNewImg.push($(this).attr("data-file"));
						    });
						 listNewImg=listNewImg.substring(0,listNewImg.length-1);
						 listImgId=listImgId.substring(0,listImgId.length-1);
						 if(selectNewImg.length>0){
						    	$(".selected-count-region").removeClass("hidden");
						    	$(".js-selected-count").html(selectNewImg.length);
						    	$("#saveImages").removeAttr("disabled");
						    }else{
						    	$(".selected-count-region").addClass("hidden");
						    	$("#saveImages").attr("disabled","disabled");
						    }
						 }
		 });
	});	
}
searchImages();
$(document).ready(function() {
	//productAddImg.getImageToHtml(true);
	searchImages(${model});
	 $("#saveImages").click(function() {
		 obz.doSelectImage(listNewImg, listNewImgUrl,listImgId);
	     if(selectImageDialog != null) selectImageDialog.close();
	 });
	 $("#uploadImagess").click(function() {
		 //if(selectImageDialog != null) selectImageDialog.close();
		 var id=$("ul.category-list li.active").attr("data-id");
		 var params={};
         if(id){
        	 params.groupId=id; 
		  }
		 obz.uploadImage(params);
	 });
	 
	 $("ul.category-list li").click(function() {
		 $("ul.category-list li").each(function(){	
			 $(this).removeClass("active");
		}); 
		 $(this).addClass("active");
		 searchImages(${model});
	 });
	 
	 $(".add-local-image-button").click(function() {
		 var id=$("ul.category-list li.active").attr("data-id");
		 var params={};
         if(id){
        	 params.groupId=id; 
		  }
		 obz.uploadImage(params);
	 });
});
</script>
<style type="text/css">
.panel-body {
    padding: 0;
}
.panel-body .category-list-region {
    background: #f2f2f2 none repeat scroll 0 0;
    box-sizing: border-box;
    float: left;
    height: auto;
    overflow: hidden;
    padding: 9px 0;
    width: 160px;
}
.panel-body .category-list-region li {
    cursor: pointer;
    height: 40px;
    width:140px;
    line-height: 40px;
    overflow: hidden;
    padding: 0 40px 0 15px;
    position: relative;
    text-overflow: ellipsis;
}
.panel-body .category-list-region li:hover {
    background: #fafafa none repeat scroll 0 0;
}
.panel-body .category-list-region li.active {
    background: #fff none repeat scroll 0 0;
}
.panel-body .category-list-region li span {
    color: #999;
    position: absolute;
    right: 30px;
    top: 0;
}
.category-list li {
    display: block;
}
ul {
    list-style: outside none none;
}
</style>
</head>
<body>
<div class="panel-body">
	[#if imageGroups?? && (imageGroups?size>0)]
    <div class="category-list-region js-category-list-region">
        <ul class="category-list">
        	[#list imageGroups as igroup]
               	<li class="js-category-item" data-id="${igroup.id}">${igroup.groupName}
                    <span>(${igroup.imageNum})</span>
                </li>
             [/#list]   
        </ul>
    </div>
    [/#if]
    <div class="panel-footer" style="height: 50px;">
	<button id="uploadImagess" type="button" class="btn btn-sm btn-success" style="margin-left:20px;;margin-bottom: 1px;float: left;">上 传 图 片</button>
		 <div id="pagerImage" class="jqpager" style="margin-bottom: 1px;float: right;"></div>
	</div>
     <div class="form-group" id="listNewImg">
         <ul class="selectMonth app-image select-month-off" id="image-list"></ul>
     </div>
     
      <div class="add-local-image-button">
                +
      </div>
</div>
<div class="panel-footer">
	<div class="selected-count-region hidden" style="display: block;float: left;">
	                                       已选择<span class="js-selected-count">0</span>张图片
	</div>
	<div  style="display: block;" align="center">
		<button id="saveImages" type="button" class="btn btn-sm btn-success" disabled="disabled"><i class="fa fa-dot-circle-o"></i>确      定</button>
	</div>
</div>
<script type="text/template" id="ul_li_tpl">
    <li>
       <img alt="" src="${webctx}/upload/{filePath}">
       <div class="image-title">{fileName}</div>
    </li>
</script>

<script type="text/template" id="group_ul_li_tpl">
    <li class="js-category-item" data-id="{id}">
         {groupName}
        <span>({imageNum})</span>
    </li>
</script>
</body>
</html>